<%@ page session="true" isELIgnored="false" %> <%@ taglib prefix="c"
uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="form"
uri="http://www.springframework.org/tags/form" %>



<script type="text/javascript">
	var researchItem=[];
	var researchPrice=[];
	var researching=false;
	var curResearch=-1;
	var resSelected=0;
	var myresearches=[];
	var researchQ=[];
	Array.prototype.hasObject = ( !Array.indexOf ? function (o)
			  {   var l = this.length + 1;
			    while (l -= 1)
			    {
			        if (this[l - 1] === o)
			        {
			            return true;
			        }
			    }
			    return false;
			  } : function (o)
			  {
			    return (this.indexOf(o) !== -1);
			  }
			);

	
	
			function createScienceScreen()
			{
				showMiniLoading();
				 researchItem=[];
				 researchPrice=[];
				 researching=false;
				 curResearch=-1;
				 resSelected=0;
				 myresearches=[];
				 researchQ=[];

				$.get("getallscience/getall", {
					myLevel:myLevel-5
				}, function(rtnmsg) {
					try{
						
					  
					if(null==rtnmsg)
					{
						 hideMiniLoading();
					noKonnect();
								return;
					}
					
					var scs = rtnmsg.syfy;
					var rs=rtnmsg.myresearch;
					
					for(var x in rs)
					{
					if(rs[x].researchComplete==1)
					{
					curResearch=parseInt(rs[x].scienceID);
					}
					else if(rs[x].researchComplete==2)
					{
					researchQ.push(parseInt(rs[x].scienceID));
					}
					else if(null!=rs[x].id && rs[x].id!=undefined)
					{
					myresearches.push(rs[x].scienceID);
					}
					}

					var frstr="<div class='researchitem'> ";
					var frxstr=" <table border='0' width='90%'><tr> <td colspan=2 class='researchtitle'>";
					var scstr="</td></tr><tr><td width='75%'  class='researchamount'>";
					var thirdstr=" </td><td width='25%'><img src='images/";
					var fourstr="' width='50' height='50'> </td></tr><tr><td colspan='2' class='researchprice'> $";	
					var fivestr=" </td></tr></table></div>'";
						
					for(var x in scs)
					{
					var curid=scs[x].id;
					if(null==curid || curid=='undefined') continue; //BUG in dev server!
					if(myresearches.hasObject(curid)) //FIXME replace with jquery function
					{
					continue;
					}	
		
					researchItem.push(""+curid);

					var minLevel= scs[x].minLevel;
					var overlayImg="";
					
					if(myLevel<minLevel)
						{
						overlayImg="<img src='images/science/locked.png' class='locked'> ";
						researchPrice.push(0);
						}
						
						else if(researchQ.hasObject(curid))
						{
						overlayImg="<img src='images/science/queued.png' class='locked'> ";
						researchPrice.push(0);
						}
					else if(curid==curResearch)
						{
						overlayImg="<img src='images/science/researching.png' class='locked'> ";
						researchPrice.push(0);
						}
					else
					{
					researchPrice.push(scs[x].researchAmount);
					}
				
					var newstring=frstr + overlayImg + frxstr+ scs[x].researchSubject + scstr +scs[x].researchText + thirdstr + scs[x].researchImage + fourstr +  scs[x].researchAmount + fivestr;
					sciencecarousel.addItem(newstring);
					}
				
				}
				catch(err)
				{
					 hideMiniLoading();	
				}
				 hideMiniLoading();
				});


				$('#researchbutton').bind('click', function(event) {

					var tempRes=researchItem[resSelected];
					if(resSelected<0)
					{
					jAlert("Please select a research item ","Nothing selected");
					return;
					}
if(resources[6][1]<researchPrice[resSelected])
{
jAlert("You have insufficient dominator dollars to fund this research","Insufficient money");
return;
}
					
					$.get("research/do", {
					researchID : tempRes
				}, function(rtnmsg) {

					if(null==rtnmsg)
					{
					noKonnect();
						return;
					}
					
					if(rtnmsg.status=="+OK")
					{
					jAlert("Your research item has been added to research queue. <br> <br> Research will be complete in 8 hours","Queued");
					$("#researchbutton").button("disable");	
					}
					else
					{
					jAlert("Problem while researching your item " + rtnmsg.code,"Research rejected");
					return;
					}
					resources[6][1]-=researchPrice[resSelected];
					researchPrice[resSelected]=-1;
					syncResData();

					var resItem=$(".researchitem")[resSelected];
					
					if(curResearch<0)
					{
						curResearch=tempRes;
						resItem.innerHTML= "<img src='images/science/researching.png' class='locked'>" +resItem.innerHTML ;
					}
					else
					{
						resItem.innerHTML="<img src='images/science/queued.png' class='locked'>"+resItem.innerHTML;
					}
					});
	
				});
				hideLoading();
			}

	
	var sciencecarousel;
		
	    (function () {
			 buildScienceCarousel();
			$(".xbutton").button({ disabled: true });
			    })();
		
		function buildScienceCarousel()
		{
			sciencecarousel    = new YAHOO.widget.Carousel("sciencecontainer", {
				 revealAmount:0,numVisible: [4,2] ,isVertical:false
                 });
                         
			sciencecarousel.render(); // get ready for rendering the widget
			sciencecarousel.show(); 
			//sciencecarousel.set("selectedItem", 0);
			sciencecarousel.on("itemSelected", function (index) { 
				resSelected=index;
				if(researchPrice[index]>0)
				{
			$("#researchbutton").button("enable");
				}
				else
				{
					$("#researchbutton").button("disable");	
				}
				 });
			createScienceScreen();
		}
	
</script>
<style type="text/css">
.xbutton {
	width: 150px;
	height: 50px
}

.yui-carousel-element li {
	height: 160px;
	text-align: left;
	cursor: pointer;
	width: 160px;
}

.yui-carousel-item-selected {
	background-color: orange;
	border: thick;
	
}

#sciencecontainer .yui-carousel-nav {
	display: block;
}

.researchitem{
	height: 160px;
	text-align: left;
	cursor: pointer;
	width: 160px;
	-moz-border-radius: 20px 20px 20px 20px;
	-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 20px 20px 20px 20px;
	-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
	border: medium none;
	color: rgb(66,44,7);
	font-size: 1.2em;
	font-weight: bold;
	outline: 0 none;
	padding: 10px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	vertical-align: middle;
	position:relative;
}

.researchprice
{
background-color: gray;
width:100%;
text-align:center;
xheight:15%;
}
.researchamount{
font-size:0.6em;
font-weight: bold;
}
.researchtitle
{
text-align:center;
height:40px;
}
.locked
{
position:absolute;left:40px;top:40px;float:left;
width:80px;height:80px;
}
</style>



<div id="researchco">
<div id="sciencecontainer" class="yui-skin-sam">

<ol id="sciencecarousel">


</ol>
</div>
<button class="xbutton" id="researchbutton">Research</button>
</div>







